<template>
  <div class="center-page">
    <div class="list-item" v-for="(item, index) in listData" :key="index">
      <div class="item-icon" />
      <div>
        <div class="item-num" :style="{ color: item.color }">{{ item.num }}</div>
        <div class="item-type">{{ item.type }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
const listData = ref([
  { type: "防拆卸告警", num: "140", color: "#e7f033" },
  { type: "无计划告警", num: "140", color: "#FF4A4A" },
  { type: "外出提醒", num: "140", color: "#FFC200" },
  { type: "计划外作业告警", num: "140", color: "#D01643" },
  { type: "疑似无计划", num: "140", color: "#BA7AED" }
])
</script>

<style lang="scss" scoped>
.center-page {
  width: 821px;
  height: 64px;
  z-index: 99999999;
  position: absolute;
  top: 123px;
  left: 50%; /* 将左边距设置为50% */
  transform: translateX(-55%); /* 向左移动自身宽度的一半 */
  display: flex;
  justify-content: space-between;
  align-items: center;

  .list-item {
    width: 145px;
    height: 64px;
    background-image: url("../../../assets/images/bgc-centerList.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 6px 12px;
    display: flex;

    align-items: center;

    .item-icon {
      width: 27px;
      height: 29px;
      background-image: url("../../../assets/images/icon-center.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .item-num {
      font-family: DINCONDENSED;
      font-weight: bold;
      font-size: 26px;
      margin-left: 10px;
    }
    .item-type {
      font-family: AlibabaPuHuiTi20;
      font-weight: normal;
      font-size: 12px;
      color: #ffffff;
      margin-left: 10px;
    }
  }
}
</style>
